<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>购物车数量:{{count}}</div>
    <button @click="addAsync">添加</button>
</div>
</body>
<script src="../../js/vue.js"></script>
<script src="../../js/vuex.js"></script>
<script type="text/javascript">
    function getData() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('getData success')
                resolve()
            }, 1000)
        })
    }

    function getOtherData() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('getOtherData success')
                resolve()
            }, 2000)
        })
    }

    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment(state) {
                state.count++
            }
        },
        actions: {
            async actionA({commit}) {
                commit('increment', await getData())
            },
            async actionB({dispatch, commit}) {
                await dispatch('actionA')  //等待actionA完成
                commit('increment', await getOtherData())
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        store,
        methods: {
            addAsync() {
                this.$store.dispatch('actionB')
            },
        },
        computed: {
            count() {
                return this.$store.state.count
            }
        }
    })

</script>
</html>
